<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
  <div class="ui-mode-box flex-col">
    <div class="mt-tab-title">
      可用余额<i>{{ totalNum | formatText }}</i
      >元
    </div>
    <div class="tx-tab-title">
      <div @click="hanldtoShow">提现</div>
      <div @click="recordList">提现记录</div>
    </div>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      @close="closePopup"
      :style="{ height: '30%' }"
    >
      <div class="record_box">
        <div class="mt-tab-title">
          可提现金额<i>{{ totalNum | formatText }}</i
          >元
        </div>
        <van-form @submit="onSubmit">
          <van-field
            v-model="recordForm.money"
            name="money"
            label="提现金额"
            placeholder="请输入提现金额"
            :rules="[{ required: true, message: '请输入提现金额' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit"
              >提交申请</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
    <!-- 提现记录 -->
    <van-popup
      v-model="showList"
      closeable
      position="bottom"
      @close="closePopup"
      :style="{ height: '80%' }"
    >
      <div class="record_box">
        <div class="box-style" v-for="(item, index) in listRecord" :key="index">
          <template>
            <div class="box flex1">
              <p class="flex-row align-between-row">
                <span>{{ "提现时间：" + item.consume_remark_006 || "-" }}</span>

                <span class="black"
                  >提现金额：<i class="m1">&yen;</i
                  >{{ Math.abs(item.consume_price) }}</span
                >
              </p>
              <p class="flex-row align-between-row gray">
                <span>{{ "审批时间：" + item.consume_remark_002 || "-" }}</span>
                <span
                  :class="[
                    item.consume_status === 901
                      ? 'black'
                      : item.consume_status === 903
                      ? 'green'
                      : 'red',
                  ]"
                  >{{
                    item.consume_status === 901
                      ? "待审批"
                      : item.consume_status === 902
                      ? "审批拒绝"
                      : "审批通过"
                  }}</span
                >
              </p>
            </div>
          </template>
        </div>
      </div>
    </van-popup>
    <div class="mt-tab-inner relative flex1">
      <div class="ui-mode-box body" ref="scroll">
        <div class="relative" v-if="list && list.length">
          <div
            class="item flex-row align-stretch"
            :key="`balance-${i}`"
            v-for="(item, i) in list"
          >
            <div class="box flex1">
              <p class="flex-row align-between-row">
                <span
                  ><b>{{
                    dictionary.consume_type[item.consume_type] || "-"
                  }}</b></span
                >
                <span
                  :class="[
                    item.consume_price == 0
                      ? 'black'
                      : item.consume_price > 0
                      ? 'green'
                      : 'red',
                  ]"
                  >{{ item.consume_remark | formatText }}</span
                >
              </p>
              <p class="flex-row align-between-row gray">
                <span>{{ item.time_consume | formatText }}</span>
                <span class="black"
                  >合计：<i class="m1">&yen;</i
                  >{{ item.consume_price | formatText }}</span
                >
              </p>
            </div>
          </div>
          <div
            v-if="isScrolling"
            class="flex1 flex-row align-center scrolling-content relative"
          >
            <span class="icon">
              <bsx-loading
                master-background="rgba(0,0,0,0)"
                box-background="rgba(0,0,0,0)"
                :size="35"
                :show-text="false"
              ></bsx-loading>
            </span>
            <span class="text">努力加载中...</span>
          </div>
          <div
            v-else-if="isLoadEnded"
            class="flex1 flex-row align-center scrolling-content relative"
          >
            已经到底啦~~
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixinCommon from "../../mixins/common";
import mixinRequest from "../../mixins/request";
import mixinList from "../../mixins/list";
import { formatDate } from "@/utils/tool";

export default {
  data() {
    return {
      show: false,
      showList: false,
      listRecord: null,
      recordForm: {
        money: "",
      },
    };
  },
  mixins: [mixinCommon, mixinRequest, mixinList],
  props: {
    totalNum: "",
  },
  computed: {},
  watch: {
    resourceLoaded: {
      handler(flag) {
        flag && this.$nextTick(this.init);
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    /*
     * 初始化
     */
    init() {
      this.getListInfo({
        flag: true,
        page: 0,
      });
    },
    /*
     * 获取列表数据
     */
    getListInfo({ flag, page, callback }) {
      this.getShopInfo()
        .then(() => {
          this.getPageInfo({
            name: "book.balance",
            param: {
              invoke_method: "public_page_4m_consume_list",
              pre_db_para_begin_idx: page * this.pageSize,
              pre_db_para_length_4_list: this.pageSize,
              pre_db_para_order_by_para: "time_consume DESC",
              consume_type_in: "1,2,3,4",
              is_online: 0,
              buyer_id: this.public_user_info.id_public_user_info,
              sequence_order_is_null: true,
            },
          })
            .then(({ result, response }) => {
              if (result.page_content && result.page_content.length) {
                this.list.push(...result.page_content.slice(0, this.pageSize));
                this.currentPage = page;
                if (result.page_content.length < this.pageSize) {
                  this.isLoadEnded = true;
                } else if (
                  (this.currentPage + 1) * this.pageSize >=
                  result.result_num
                ) {
                  this.isLoadEnded = true;
                }
                callback && callback();
              } else {
                if (flag) {
                  this.showResult("没有查询到相关数据");
                } else {
                  this.showToast("没有查询到相关数据", false);
                }
                callback && callback();
              }
            })
            .catch(({ msg }) => {
              if (!flag) {
                this.showToast(msg, false);
              }
              callback && callback();
            });
        })
        .catch(({ msg }) => {
          if (!flag) {
            this.showToast(msg, false);
          }
          callback && callback();
        });
    },
    getShopInfo() {
      return new Promise((resolve, reject) => {
        let public_agent_info = this.$store.state.global.public_agent_info,
          public_user_info = this.$store.state.global.public_user_info;
        if (public_agent_info && public_user_info) {
          this.public_agent_info = public_agent_info;
          this.public_user_info = public_user_info;
          document.title = this.public_agent_info.application_name;
          resolve({});
        } else {
          this.$http
            .post({
              name: "my",
              data: {
                invoke_method: "user_and_shop_info",
              },
              loading: {
                enabled: false,
              },
            })
            .then(({ result, response }) => {
              this.public_agent_info = result.public_agent_info || {};
              this.public_user_info = result.public_user_info || {};
              document.title = this.public_agent_info.application_name;
              this.setState({
                key: "public_agent_info",
                value: this.public_agent_info,
              });
              this.setState({
                key: "public_user_info",
                value: this.public_user_info,
              });
              resolve({ result, response });
            })
            .catch(({ msg }) => {
              reject({ msg });
            });
        }
      });
    },
    /*
     * 请求失败刷新
     */
    handleRefresh() {
      this.init();
    },
    // 发起提现申请
    onSubmit() {
      let time = new Date();
      time = formatDate(time, "YYYY.MM.DD hh:mm:ss");
      this.$http
        .post({
          name: "book.record",
          data: {
            invoke_method: "public_page_4m_insert_or_upd_consume_record",
            consume_price: -this.recordForm.money,
            consume_remark: "申请提现",
            user_type: 3,
            consume_status: 901,
            consume_type: 201,
            is_online: 0,
            id_public_data_admin_user: 800,
            seller_id: 99101,
            consume_remark_006: time,
            buyer_id: this.public_user_info.id_public_user_info,
            pre_cmd_para_check_exist_apply: true,
            consume_remark_004: this.public_user_info.nick_name,
            consume_remark_005: this.public_user_info.user_phone,
            isloading: true,
          },
          loading: {
            enabled: false,
          },
        })
        .then(({ result, response }) => {
          console.log(result);
          this.showToast("提交申请成功，请耐心等待审核").then(() => {
            this.hanldtoShow();
          });
        })
        .catch(({ msg }) => {
          this.showMessage(msg).then(() => {
            this.hanldtoShow();
          });
        });
    },
    // 提现记录
    recordList() {
      this.showList = true;
      this.$http
        .post({
          name: "book.record",
          data: {
            invoke_method: "public_page_4m_consume_list",
            pre_db_para_begin_idx: 0,
            // pre_db_para_length_4_list: 10,
            seller_id: 99101,
            consume_type: 201,
            buyer_id: this.public_user_info.id_public_user_info,
            pre_db_para_order_by_para: "consume_remark_006 DESC",
          },
          loading: {
            enabled: false,
          },
        })
        .then(({ result, response }) => {
          this.listRecord = result.page_content;
        })
        .catch(({ msg }) => {
          this.showMessage(msg).then(() => {
            this.hanldtoShow();
          });
        });
    },
    // 显示提现弹窗
    hanldtoShow() {
      this.show = !this.show;
    },
    // 关闭弹出层
    closePopup() {
      this.recordForm.money = "";
    },
  },
  components: {},
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.tx-tab-title {
  background: #fafafa;
  line-height: 2rem;
  position: relative;
  padding: 0 0.5rem;
  color: #9b9b9b;
  font-size: 0.7rem;
  border-bottom: solid 1px #eee;
  display: flex;
  justify-content: space-between;
}
.record_box {
  margin-top: 3rem;
}
input,
label {
  vertical-align: middle;
  cursor: text;
  font-size: 1rem;
  border-radius: 0px;
  font-family: Helvetica, tahoma, arial, \5fae\8f6f\96c5\9ed1, sans-serif;
}
</style>
<style lang="less">
input,
label {
  vertical-align: middle;
  cursor: text;
  font-size: 1rem;
  border-radius: 0px;
  font-family: Helvetica, tahoma, arial, \5fae\8f6f\96c5\9ed1, sans-serif;
}
.box-style {
  padding: 0.3rem 0.5rem;
  background: #e9e9e9;
  margin-bottom: 0.2rem;
}
</style>
